<template name="queryWizard">
    <div class="modal inmodal" id="queryWizardModal" tabindex="-1" role="dialog" aria-hidden="true"
         style="display: none;">
        <div class="modal-dialog">
            <div class="query-wizard fadeInRight animated active">
                <div class="heading" draggable="true">
                    {{_ "wizard"}}
                    <small id="btnResetChat" class="reset-chat pull-right">
                        {{_ "reset_chat"}}
                    </small>
                </div>
                <div class="content" style="overflow: hidden; width: auto; height: 234px;">

                    <div class="left">
                        <div class="author-name">
                            Nosqlclient
                        </div>
                        <div class="chat-message active">
                            {{_ "wizard_start"}}
                        </div>

                    </div>
                    <div class="right">
                        <div class="author-name">
                            Me
                        </div>
                        <div class="chat-message">
                            Hmm...
                        </div>
                    </div>

                </div>
                <div class="form-chat">
                    <div id="divQueryWizardCombo" style="display: none" class="input-group input-group">
                        <select id="cmbQueryWizardResponses"
                                data-placeholder="{{_ "wizard_start_user"}}"
                                class="chosen-select form-control"
                                tabindex="-1">
                            <option></option>

                            <optgroup id="optGroupPositives" label="Positives">
                                <option value="1">{{_ "wizard_option_1"}}</option>
                                <option value="2">{{_ "wizard_option_2"}}</option>
                                <option value="3">{{_ "wizard_option_3"}}</option>
                                <option value="4">{{_ "wizard_option_4"}}</option>
                                <option value="5">{{_ "wizard_option_5"}}</option>
                                <option value="6">{{_ "wizard_option_6"}}</option>
                            </optgroup>


                            <optgroup id="optGroupNegatives" label="Negatives">
                                <option value="-1">{{_ "wizard_option_minus_1"}}</option>
                                <option value="-2">{{_ "wizard_option_minus_2"}}</option>
                                <option value="-3">{{_ "wizard_option_minus_3"}}</option>
                                <option value="-4">{{_ "wizard_option_minus_4"}}</option>
                                <option value="-5">{{_ "wizard_option_minus_5"}}</option>
                                <option value="-6">{{_ "wizard_option_minus_6"}}</option>
                            </optgroup>

                        </select>
                        <span class="input-group-btn"> <button id="btnQueryWizardRespond" class="btn btn-primary"
                                                               type="button">{{_ "send"}}</button> </span>
                    </div>

                    <div id="divQueryWizardTxt" class="input-group input-group">
                        <input id="inputQueryWizardResponse"
                               class="form-control"/>
                        <span class="input-group-btn"> <button id="btnQueryWizardRespond2" class="btn btn-primary"
                                                               type="button">{{_ "send"}}</button> </span>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>